<template>
<div id="downloadHome">
	<appVue :closeWZA="isCloseWZA()">
		<template #sectionContent>
			<div class="content">
				<carousel></carousel>
				<choiceness :choiceChannelList='choiceChannelList' v-if='choiceChannelList.length'></choiceness>
				<classification :classificationList='classificationList' v-if='classificationList.length'></classification>
			</div>
		</template>	
	</appVue>
</div>
</template>

<script>
	import { defineAsyncComponent } from 'vue';
	export default {
		components: {
			appVue: defineAsyncComponent(() => import(rootPath + '/src/app.vue')),
			myheader:defineAsyncComponent(() => import(rootPath+'/src/components/header/header.vue')),
			navs:defineAsyncComponent(() => import(rootPath+'/src/components/header/nav.vue')),
			search:defineAsyncComponent(() => import(rootPath+'/src/components/header/search.vue')),
			carousel:defineAsyncComponent(() => import(rootPath+'/src/components/download/carousel.vue')),
			choiceness:defineAsyncComponent(() => import(rootPath+'/src/components/download/choiceness.vue')),
			classification:defineAsyncComponent(() => import(rootPath+'/src/components/download/classification.vue')),
			ranking:defineAsyncComponent(() => import(rootPath+'/src/components/download/ranking.vue')),
			contact:defineAsyncComponent(() => import(rootPath+'/src/components/footer/contact.vue')),
			information:defineAsyncComponent(() => import(rootPath+'/src/components/footer/information.vue')),
			backtop:defineAsyncComponent(() => import(rootPath+'/src/components/footer/backtop.vue'))
		},
		data() {
			return {
				isSearch: false,
				choiceChannelList:[],
				classificationList:[],
				query:GetQueryString(),
			}
		},
		created(){
		  SEO(this.query);
		},
		mounted(){
			this.getChannelList();
		},
		methods: {
			getChannelList(){ // 获取子栏目
				let param = {
					parentId:this.query.id,
				};
				homeApi.HeaderChannellist(param, res=>{
					if(res.code == '00000 00000'){
             this.choiceChannelList = res.data.slice(0,2);
						 this.classificationList = res.data.slice(2,res.data.length);
						 console.log(this.choiceChannelList, this.classificationList, 'this.choiceChannelList, this.classificationList')
					}
				})
			},
			isCloseWZA() {
				return localStorage.getItem('close') || false;
			},
		},
	 
	}
</script>

<style>
	#downloadHome {
		height: fit-content;
		overflow: auto;

		
	}
	#downloadHome .navigation {
		width: 100%;
	}
	#downloadHome .sectionContent{
		margin-top: 110px;
	}
	#downloadHome .content {
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	
		
	}
	
	#downloadHome .hotspot {
		margin-left: 40px;
	}
	.content .contentLeft {
			width: 1200px;
			margin-top: 48px;
			display: flex;
		}
</style>
<style>
	#downloadHome .mhover:hover {
		color: #Ff3333 !important;
		cursor: pointer;
	}
</style>